<template>
	<view class="police">
		<view class="indexTop" style="background-image: url('../..//static/imgs/headbg.png');">
			<view class="topBut">
				<view class="topButlist" @click="toTaskManagement">
					<img src="../../static/imgs/icon1.png" >
					<span>任务管理</span>
				</view>
				<view class="topButlist" @click="totaskDistribution">
					<img src="../../static/imgs/icon2.png" >
					<span>任务下派</span>
				</view>
			</view>
		</view>
		<view class="subheading">
			<img src="../../static/imgs/tip.png" >
			已下派任务
		</view>
		<view class="content">
			<view class="contentList" v-for="item in dataList" @click="toDetails(item.id)">
				<view class="contentListTop">
					<view class="contentListtitle">
					{{item.eventName}}
					</view>
					<view class="contentListstate">
						<span style="background: #d9001b;" v-if="item.eventStatus == '0'">待接收</span>
						<span style="background: #fe7a21;" v-else-if="item.eventStatus == '1'">待完成</span>
						<span style="background: #137a29;" v-else>已完成</span>
					</view>
				</view>
				<view class="contentListTime">
					事发时间：{{item.eventTime}}
				</view>
			</view>
		</view>
		<tui-tabbar :tabBar="tabBar" :current="current" @click="tabbarSwitch" color="#9B9B9B" selectedColor="#3291F8" iconSize="48">	
		</tui-tabbar>	
	</view>
</template>

<script>
	import {mapState, mapGetters, mapMutations} from 'vuex'
	import config from "@/config/index.config.js";
	export default {
		components: {
		},
		data() {
			return {
				current: 0,
				size:'10',
				currentt:'1',
				dataList:[
					{id:'123456', title:'标题1', time:'2023-02-08', state:'1'},
					{id:'561615', title:'标题2', time:'2023-06-08', state:'2'},
					{id:'496166', title:'标题3', time:'2023-02-09', state:'3'},
					{id:'123456', title:'标题1', time:'2023-02-08', state:'1'},
					{id:'561615', title:'标题2', time:'2023-06-08', state:'2'},
					{id:'496166', title:'标题3', time:'2023-02-09', state:'3'},
					{id:'123456', title:'标题1', time:'2023-02-08', state:'1'},
					{id:'561615', title:'标题2', time:'2023-06-08', state:'2'},
					{id:'496166', title:'标题3', time:'2023-02-09', state:'3'},
					{id:'123456', title:'标题1', time:'2023-02-08', state:'1'},
					{id:'561615', title:'标题2', time:'2023-06-08', state:'2'},
					{id:'496166', title:'标题3', time:'2023-02-09', state:'3'},
					{id:'123456', title:'标题1', time:'2023-02-08', state:'1'},
					{id:'561615', title:'标题2', time:'2023-06-08', state:'2'},
					{id:'496166', title:'标题3', time:'2023-02-09', state:'3'},
				]
			};
		},
		computed: {
			...mapGetters(['tabBar', "hasLogin"]),
			...mapState(["userInfo"]),
		},
		onLoad() {},
		onUnload() {},
		onShow() {
			this.getData()
		},
		onReady() {
		    const observer = this.createIntersectionObserver();
		
		    observer.relativeTo('.content').observe('.target-view', (res) => {
		      if (res.intersectionRatio > 0) {
		        console.log('指定view滚动到底部');
		        // 在这里可以执行相应的操作
		      }
		    });
		  },
		methods: {
			getData(){
				this.$apis.getIndexLIst({createId: this.userInfo.id, size:this.size, current: this.currentt,}).then(res =>{
					if(res.code == '20000'){
						this.dataList = res.data.page.records
					}
				})
			},
			toTaskManagement(){
				wx.navigateTo({
				  url: '/pages/policeEnd/taskManagement'
				})
			},
			totaskDistribution(){
				wx.navigateTo({
				  url: '/pages/policeEnd/taskDistribution'
				})
			},
			toDetails(id){
				uni.navigateTo({
				  url: '/pages/policeEnd/details',
				  success: function(res) {
				    uni.$emit('eventName', { uid: id }); 
				  }
				});
			},
			tabbarSwitch(e) {
				if (e.index == this.current) return
				if (e.index == 1) {
					uni.switchTab({
						url: '/pages/policeEnd/taskManagement'
					})
				} else if (e.index == 2) {
					uni.switchTab({
						url: '/pages/policeEnd/taskManagement'
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	.police{height: 100vh;}
	.indexTop{width: 100%; height: 350rpx; background-size: 100% 100%; position: relative;
		.topBut{position: absolute;bottom: -25rpx; margin-left: 25rpx; display: flex; justify-content: center; align-items: flex-end; background: #ffffff; width: calc(100% - 50rpx); height: 190rpx;   border-radius: 20rpx;
			.topButlist{ margin: 0 70rpx; text-align: center;
				img{width: 110rpx; height: 110rpx;}
				span{margin-top: 15rpx; display: block;}
			}
		}
	}
	.subheading{
		position: relative;
		margin-top: 50rpx;
		padding-left: 25rpx;
		font-size: 33rpx;
		font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
		font-weight: 650;
		letter-spacing: 1px;
		img{
			position: absolute;
			left: 10rpx;
			width: 45rpx;
			height: 45rpx;
			z-index: -1;
		}
	}
	.content{ padding: 0 25rpx; height: calc(100% - 400rpx - 250rpx); overflow-y: auto;
		.contentList{ margin-top: 30rpx; padding: 0 20rpx;
			.contentListTop{display: flex; align-items: center; margin-bottom: 20rpx;
				.contentListtitle{
					width: calc(100% - 120rpx);
					font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
					font-weight: 650;
					font-size: 40rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
				.contentListstate{width: 120rpx;
					span{padding: 5rpx 15rpx; color: #ffffff; border-radius: 10rpx;}
				}
			}
			.contentListTime{
				font-size: 28rpx;
				color: #959CA6;
			}
		}
	}
</style>